<template>
  <el-drawer :title="title" size="900px" direction="rtl" :closable="false" :visible="visible" @close="onClose">
    <div>
      <el-card class="card-content">
        <div class="requiredNews">工序详情</div>

        <el-button type="primary" style="margin: 20px 0;" @click="$refs.techForm.showForm(taskNum)">
          新建工艺
        </el-button>
        <br />
        <el-table
          :data="list"
          fit
          row-key="id"
        >
          <el-table-column align="center" label="工艺">
            <template slot-scope="scope">
              <span>{{ scope.row.techName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" prop="state" :formatter="formatState">
            <!-- <template slot-scope="scope">
              <span>{{ scope.row.state }}</span>
            </template> -->
          </el-table-column>
          <el-table-column align="center" label="数量">
            <template slot-scope="scope">
              <span>{{ scope.row.techQuantity }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="标准工时">
            <template slot-scope="scope">
              <span>{{ scope.row.techTime }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="备选设备">
            <template slot-scope="scope">
              <span>{{ scope.row.equipment }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <TechForm ref="techForm" @getList="getList"></TechForm>

  </el-drawer>
</template>

<script>
// import api from "@/api/apiServer";
// import { columns, wareDesColumns } from "./tableConfig";
// import { tableMinxins } from "@/unit/mixins/tableMinxins.js";

// import { baseURL } from '@/utils/request'
// import VueQr from "vue-qr";
// import { savePoster } from "@/unit/tool";
import { dibootApi } from '@/utils/request'
import TechForm from './techForm.vue'

export default {
  // mixins: [tableMinxins],
  components: { 
    // VueQr,
    TechForm
  },
  data() {
    return {
      // columns,
      visible: false,
      // drawerWidth: 900,
      title: " ",
      list: [],
      taskNum: '',
      record: {},
    };
  },
  methods: {
    showDrawer(record) {
      if (record.id) {
        this.productTaskGetList(record);
        this.taskNum = record.taskNum
        this.record = record
      }
      this.visible = true;
    },
    // 获取工艺明细
    async productTaskGetList(record) {
      let { taskNum } = record
      const res = await dibootApi.get(`/technique/getList`, { taskNum });
      if(res && res!=null){
        this.list = res

        // let { data } = res
        // if( data.length>0 ){
        //   let { techniqueList } = data[0];
        //   this.list = techniqueList;
        // }
      }
      
      // if (res.code === 0) {
      //   this.options = res.data;
      // }else{
      //   this.$notify.error({
      //     title: '获取列表数据失败',
      //     message: res.msg
      //   })
      // }
    },
    formatState(row, column, cellValue, index){
      switch (cellValue) {
        case 0:
        return `未开始`;
        case 1:
        return `已完成`;
        case 2:
        return `进行中`;
        default:
          return '';
      }
    },
    onClose() {
      this.visible = false;
      // this.model = Object.assign({});
      // this.current = 1;
    },
    getList() {
      this.productTaskGetList(this.record);
    },
  }
};
</script>

<style lang="scss" scoped>
.card-header {
  margin: 20px 0;
}
button {
  margin-right: 13px;
}
.card-content {
  margin-bottom: 20px;
  .contetnBox {
    border: 1px solid #ebedf0;
    border-radius: 2px;
    padding: 20px 0;
    .headerBox {
      padding: 0 20px;
    }
  }
}
.requiredNews {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1a5eff;
  margin-bottom: 12px;
}
</style>
